<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax发送post请求</title>
		<style>
			#loading {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #555555;
				opacity: .5;
				text-align: center;
				line-height: 300px;
			}
			#loading::after {
				content: '加载中...';
				color: #FFF3CD;
			}
		</style>
	</head>
	<body>
		<div id="loading"></div>
		<table border="1">
			<tr>
				<td>用户名</td>
				<td><input type="text" id="username"></td>
			</tr>
			<tr>
			  <td>密码</td>
			  <td><input type="password" id="password"></td>
			</tr>
			<tr>
			  <td></td>
			  <td><button id="btn">登录</button></td>
			</tr>
		</table>
		<script type="text/javascript">
			//找一个合适的时机,做一件合适的事情
			var btn = document.getElementById('btn')
			// 1.获取界面上的元素 value
			var txtUsername = document.getElementById('username')
			var txtPassword = document.getElementById('password')
			var loading = document.getElementById('loading')
			
			btn.addEventListener('click',function() {
				loading.style.display = 'block';
				var username = txtUsername.value
				var password = txtPassword.value
				// 2.通过XHR发送一个POST请求
				var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
				xhr.open('POST','login.php');
				// !!! 一定注意 如果请求体是 urlencoded 格式 必须设置这个请求头 !!!
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
				// xhr.send('username=' + username + '&Password=' + password)
				xhr.send(`username=${username}&password=${password}`);
				// 3.根据服务端的反馈 作出界面提示
				xhr.addEventListener('readystatechange',function() {
					if (this.readyState !== 4) return;
					console.log(this.responseText)
					loading.style.display = 'none';
				})
			})
		</script>
	</body>
</html>
